<template>
  <el-card style="padding: 10px">
    <h1 class="title"><el-icon><UploadFilled/></el-icon>绩效考核流程操作面板</h1>
    <span class="tip1">月初基础数据重置情况(！注意：请确认所有基础数据复制情况都为“已完成”，再进行其他操作)</span>
    <div class="base_data2">
		<el-card class="card8" shadow="hover" :body-style="{padding:'10px'}">
        <span class="title1">地区系数
          <el-icon :size="28" v-show="!Check.region"><Warning/></el-icon>
          <el-icon :size="28" v-show="Check.region"><CircleCheck/></el-icon></span>
        <el-divider border-style="dashed" style="margin:8px 0"/>
        <div class="content"  style="color:#f89898;" @click="to2" v-show="!Check.region">未完成，前往设置</div>
        <span class="content" style="color:#b3e19d;" v-show="Check.region">已完成</span>
      </el-card>
	  
      <el-card class="card8" shadow="hover" :body-style="{padding:'10px'}">
        <span class="title1">员工绩效系数
          <el-icon :size="28" v-show="!Check.coe"><Warning/></el-icon>
          <el-icon :size="28" v-show="Check.coe"><CircleCheck/></el-icon></span>
        <el-divider border-style="dashed" style="margin:8px 0"/>
        <div class="content"  style="color:#f89898;" @click="to1" v-show="!Check.coe">未完成，前往设置</div>
        <span class="content" style="color:#b3e19d;" v-show="Check.coe">已完成</span>
      </el-card>
	  
      
	  
      <el-card class="card8" shadow="hover" :body-style="{padding:'10px'}">
        <span class="title1">审核人员与时限
          <el-icon :size="28" v-show="!Check.ass"><Warning/></el-icon>
          <el-icon :size="28" v-show="Check.ass"><CircleCheck/></el-icon></span>
        <el-divider border-style="dashed" style="margin:8px 0"/>
        <div class="content"  style="color:#f89898;" @click="to3" v-show="!Check.ass">未完成，前往设置</div>
        <span class="content" style="color:#b3e19d;" v-show="Check.ass">已完成</span>
      </el-card>
      <el-card class="card8" shadow="hover" :body-style="{padding:'10px'}">
        <span class="title1">评分与岗位-评分
          <el-icon :size="28" v-show="!Check.scoreRule"><Warning/></el-icon>
          <el-icon :size="28" v-show="Check.scoreRule"><CircleCheck/></el-icon></span>
        <el-divider border-style="dashed" style="margin:8px 0"/>
        <div class="content"  style="color:#f89898;" @click="to4" v-show="!Check.scoreRule">未完成，前往设置</div>
        <span class="content" style="color:#b3e19d;" v-show="Check.scoreRule">已完成</span>
      </el-card>
      <el-card class="card8" shadow="hover" :body-style="{padding:'10px'}">
        <span class="title1">计件与岗位-计件
          <el-icon :size="28" v-show="!Check.pieceRule"><Warning/></el-icon>
          <el-icon :size="28" v-show="Check.pieceRule"><CircleCheck/></el-icon></span>
        <el-divider border-style="dashed" style="margin:8px 0"/>
        <div class="content"  style="color:#f89898;" @click="to5" v-show="!Check.pieceRule">未完成，前往设置</div>
        <span class="content" style="color:#b3e19d;" v-show="Check.pieceRule">已完成</span>
      </el-card>
      <el-card class="card8" shadow="hover" :body-style="{padding:'10px'}">
        <span class="title1">提成与岗位-提成
          <el-icon :size="28" v-show="!Check.kpiRule"><Warning/></el-icon>
          <el-icon :size="28" v-show="Check.kpiRule"><CircleCheck/></el-icon></span>
        <el-divider border-style="dashed" style="margin:8px 0"/>
        <div class="content"  style="color:#f89898;" @click="to6" v-show="!Check.kpiRule">未完成，前往设置</div>
        <span class="content" style="color:#b3e19d;" v-show="Check.kpiRule">已完成</span>
      </el-card>
    </div>
    <span class="tip1">基础数据设置</span>
    <div class="base_data">
      <el-card class="card1" shadow="hover">
        <el-icon><Setting/></el-icon>
        <span class="title1">绩效系数设置</span>
        <el-divider border-style="dashed" />
        <span class="content" @click="go3">1.地区系数</span>
        <span class="content" @click="go4">2.员工绩效系数</span>
      </el-card>
      <el-card class="card1" shadow="hover">
        <el-icon><Connection/></el-icon>
        <span class="title1">公司架构设置</span>
        <el-divider border-style="dashed" />
        <span class="content" @click="go5">1.部门设置</span>
        <span class="content" @click="go6">2.岗位设置</span>
        <span class="content" @click="go7">3.员工基础信息管理</span>
      </el-card>
    </div>

    <span class="tip2">考核流程操作</span>

    <div v-for="(item,x) in content" :key="x">
      <div class="flow">
        <el-card :class="item.cardName" shadow="hover">
          <svg-icon icon="#"></svg-icon>
          <span class="title1">{{ item.title }}</span>
          <el-divider border-style="dashed" />
          <span class="content" v-for="(children,y) in item.children" :key="y" @click="go1(x,y)">
            {{ children }}
          </span>
        </el-card>

        <div :class="item.down" v-if="item.down"></div>

        <el-card :class="item.cardName1" shadow="hover">
          <svg-icon icon="#"></svg-icon>
          <span class="title1">{{ item.title1 }}</span>
          <el-divider border-style="dashed" />
          <span class="content" v-for="(children,y) in item.children1" :key="y" @click="go2(x,y)">
            {{ children }}
          </span>
        </el-card>
      </div>

      <el-row>
        <el-col :span="1" :offset="item.offset">
          <div :class="item.down1" v-if="item.down1"></div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup>
import { getPermission } from '@/api/api';
import { ref, onMounted, onBeforeMount, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
import {getCheck} from "@/api/first"
const store = useStore();
const router = useRouter();
const Check = ref([]);
onBeforeMount(() => {
  getCheck().then((data) => {
    Check.value = data.data;
  });
});


function test() {
    
    getCheck().then((data) => {
      Check.value = data.data;
    });
}

// 设置定时器，每隔 5000 毫秒（5 秒）调用一次 getCheck 方法
const intervalId = setInterval(test, 24*60*60*1000);




const to1=(x,y)=>{
  router.push({
    path: "/coefficient/empCoefficient",
  });
}
const to2=(x,y)=>{
  router.push({
    path: "/coefficient/regionCoefficient",
  });
}
const to3=(x,y)=>{
  router.push({
    path: "/performSet/assessorTimer",
  });
}
const to4=(x,y)=>{
  router.push({
    path: "/performSet/scoreIndex",
  });
}
const to5=(x,y)=>{
  router.push({
    path: "/performSet/pieceIndex",
  });
}
const to6=(x,y)=>{
  router.push({
    path: "/performSet/kpiIndex",
  });
}

const array1=
[["/performSet/scoreIndex","/performSet/pieceIndex","/performSet/kpiIndex"]
,["/performSet/detail","/performDeclare/wageDeclare"]
,["/back/fifthRetrial","/back/fifthRetrial"]]

const array2=
[["/performSet/detail","/performSet/assessorTimer"]
,["/declare/wageDeclarePiece","/declare/wageDeclareKpi","/declare/wageDeclareReward"]
,["/OA/wageFile"]]

const go1=(x,y)=>{
  let path=array1[x][y]
  router.push({
    path: path,
  });
}

const go2=(x,y)=>{
  let path=array2[x][y]
  router.push({
    path: path,
  });
}

const go3=(x,y)=>{
  router.push({
    path: "/coefficient/regionCoefficient",
  });
}

const go4=(x,y)=>{
  router.push({
    path: "/coefficient/empCoefficient",
  });
}

const go5=(x,y)=>{
  router.push({
    path: "/adminAuth/permissionList",
  });
}

const go6=(x,y)=>{
  router.push({
    path: "/adminAuth/empPosition",
  });
}

const go7=(x,y)=>{
  router.push({
    path: "/adminAuth/adminList",
  });
}

const content = [
  {
    cardName: 'card2',
    title: '第一步：设置绩效条目',
    children: ['1-1设置评分考核条目', '1-2设置计件考核条目', '1-3设置提成考核条目'],
    down: 'down1',

    cardName1: 'card3',
    title1: '第二步：设置岗位绩效与审核信息',
    children1: ['2-1设置岗位绩效','2-2设置审核人员与审核时限'],
    down1: 'down2',
    offset: 18,
  },
  {
    cardName: 'card4',
    title: '第四步：考核流程开启与申报',
    children: [
      '4-1开启绩效考核流程','4-2.绩效专员申报（若要导入okr请在申报前导入）'
    ],
    down: 'down3',

    cardName1: 'card5',
    title1: '第三步：绩效专员填写',
    children1: [
      '3-1填写计件项目',
      '3-2填写提成项目',
      '3-3填写特殊绩效项目',],
    down1: 'down2',
    offset: 5,
  },
  {
    cardName: 'card6',
    title: '第五步：重填被驳回申报',
    children: ['5-1重填被驳回计件申报', '5-2重填被驳回提成申报'],
    down: 'down1',

    cardName1: 'card7',
    title1: '第六步：审批完成-归档',
    children1: ['6-1绩效专员归档'],
    down1: null,
  },
];
</script>

<style lang="scss" scoped>
$primary1: #425aef;
$primary2: #b73bda;
$primary3: #1e92f0;
$primary4: #e52743;
$primary5: #425aef;
$primary6: #e2b72b;
$primary7: #37e22b;

@font-face{
    font-family: 阿里健康体;
    src:url('../../assets/font/AlibabaHealthFont2.0CN-85B.ttf');
}

* {
  font-family: 阿里健康体;
  color: #363636;
  transition: all 0.3s;
  box-sizing: border-box;
}
.title {
  font-size: 1.5625rem;
  letter-spacing: 0.1875rem;
  padding: 0 0 1rem;
  margin-bottom: 16px;
  text-align: center;
}
@mixin Tip($color) {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 1rem 1rem;
  letter-spacing: 0.0625rem;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 50%;
    background-color: $color;
    border-radius: 8px;
  }
}
@mixin Card($color) {
  width: 100%;
  padding: 1.25rem 1rem;
  letter-spacing: 0.0625rem;
  font-weight: 500;
  transition: all 0.3s;
  &:hover .title1 {
    color: $color;
  }
  &:hover {
    border: 1px solid $color;
  }
  .title1 {
    font-size: 18px;
  }
  .content {
    position: relative;
    font-size: 16px;
    margin-right: 20px;
    cursor: pointer;
    &::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: -5px;
      width: 100%;
      height: 4px;
      background-color: $color;
      border-radius: 8px;
      transform: scale(0);
      transition: all 0.3s;
    }
    &:hover::before {
      transform: scale(1);
    }
  }
}
@mixin Down($width, $margin, $rotate) {
  position: relative;
  height: 30px;
  width: $width;
  background-color: #79bbff;
  border-radius: 8px;
  margin: $margin;
  transform: rotate($rotate);
  &::before {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 4px;
    height: 50%;
    transform: rotate(45deg);
    background-color: #68aaec;
    border-radius: 8px;
  }
  &::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: -3px;
    width: 4px;
    height: 50%;
    transform: rotate(-45deg);
    background-color: #68aaec;
    border-radius: 8px;
  }
}
.tip1 {
  @include Tip($primary1);
}
.base_data {
  display: flex;
  gap: 54px;
  margin-bottom: 16px;
}
.base_data2 {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.flow {
  display: flex;
}
.card1 {
  @include Card($primary1);
}
.tip2 {
  @include Tip($primary2);
}
.card2 {
  @include Card($primary2);
}

.down1 {
  @include Down(8px, auto 25px, -90deg);
}
.down2 {
  @include Down(4px, 12px auto, 0deg);
}
.down3 {
  @include Down(8px, auto 25px, 90deg);
}

.card3 {
  @include Card($primary3);
}
.card4 {
  @include Card($primary4);
}
.card5 {
  @include Card($primary5);
}
.card6 {
  @include Card($primary6);
}
.card7 {
  @include Card($primary7);
}
.el-card {
  border-radius: 10px;
  padding: 0;
}
@mixin Card2($color) {
  width: 100%;
  height: 100px;
  letter-spacing: 0.0625rem;
  font-weight: 500;
  transition: all 0.3s;
  &:hover .title1 {
    color: $color;
  }
  &:hover {
    border: 1px solid $color;
  }
  .title1 {
    font-size: 14px;
    height: 10px;
  }
  .content {
    position: relative;
    font-size: 14px;
    margin-right: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    &::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: -5px;
      width: 100%;
      height: 4px;
      background-color: $color;
      border-radius: 8px;
      transform: scale(0);
      transition: all 0.3s;
    }
    &:hover::before {
      transform: scale(1);
    }
  }
}
.card8 {
  @include Card2(#b3e19d);
}
</style>
